<template>
	<view>
		<view class="index_seach">
			<view class="index_input">
				<img class="seach_img" src="https://www.leedong.top/img/seach.png" alt="" srcset="" />
				<input confirm-type="search" @confirm="doSearch"  v-model="seachVal"
					placeholder="请输入车牌号" placeholder-class="pla" style="padding-left: 50px;" />
			</view>
		</view>
		<view class="" v-if="data">
			
	
		<view class="infos" >
			
			<view class="content">
				<view class="items">
					<text class="name">车牌号：</text>
					<text class="name">{{data.cp}}</text>
				</view>
				<view class="items">
					<text class="name">五行数量：</text>
					<text class="name">{{data.wxsl}}</text>
				</view>
				<view class="items">
					<text class="name">五行属性：</text>
					<text class="name">{{data.wxsx}}</text>
				</view>
				<view class="items">
					<text class="name">五行阴阳：</text>
					<text class="name">{{data.wxyy}}</text>
				</view>
				
			</view>
		
		</view>
		<view class="infos" >
			<view class="title">
				<text class="shu"></text>
				<text class="ti">吉凶分析</text>
			</view>
			<view class="content">
				<p class="details">{{data.xjfx}}</p>
			</view>
		</view>
		
		<view class="infos">
			<view class="title">
				<text class="shu"></text>
				<text class="ti">主人个性</text>
			</view>
			<view class="content">
				<p class="details">{{data.zrgx}}</p>
			</view>
		</view>
			</view>
			<view class="yl">
				<text>仅供娱乐！请勿当真</text>
			</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				seachVal:"",
				data:null
			}
		},
		onShareAppMessage(res) {
			wx.showShareMenu({
				withShareTicket: true,
				menus: ['shareAppMessage', 'shareTimeline']
			})
			return {
				title: "测测你的车牌是不是大吉大利",
				imageUrl: "https://www.leedong.top/img/suangua1.jpg"
			}
		
		},
		//2.分享到朋友圈
		onShareTimeline() {
		
			return {
				title: '测测你的车牌是不是大吉大利',
				imageUrl: "https://www.leedong.top/img/suangua1.jpg",
		
		
			}
		},
		methods: {
			doSearch(){
				this.$api.chepai({cp:this.seachVal}).then(res=>{
					console.log(res)
					if(res.code==200){
						if(res.data.wxsl){
								this.data=res.data;
						}else{
							uni.showToast({
								title:"请输入正确的车牌号",
								icon:'none'
							})
						}
					
					}else{
						uni.showToast({
							title:"次数已用完",
							icon:'none'
						})
					}
				})
			},
		}
	}
</script>

<style lang="scss">
		.index_seach{
			height: 50px;
			width: 100%;
			
			.index_input{
				width: 97%;
				height: 50px;
				margin: auto;
				display: flex;
				align-items: center;
				position: relative;
			
				input{
					height: 28px;
					border-radius: 20px;
					width:100%;
						border: 1px solid #e5e5e5;
					background-color: #fff;
					padding-left: 25px;
					font-size: 14px;
				}
				.seach_img{
					width: 32px;
					position: absolute;
					height: 32px;
				}
				.pla{
					padding-left: 30px;
					font-size: 14px;
				}
				
			}
		}
		.infos {
			margin-top: 30rpx;
		
			.title {
				display: flex;
				padding: 20rpx;
		
				.shu {
		
					width: 5px;
					height: 20px;
					background-color: #e6a84b;
					border-radius: $uni-border-radius-base;
				}
		
				.ti {
					padding-left: 15rpx;
					font-weight: 800;
				}
			}
		
			.content {
				display: flex;
				flex-wrap: wrap;
				margin-left: 18px;
				margin-right: 18px;
		
				.items {
					width: 50%;
					margin-top: 15px;
					font-size: 27rpx;
				}
		
				.details {
					font-size: 27rpx;
					user-select: all;
				}
			}
		}
</style>
